<template>
	<view class="commend-wrap">
		<!-- nav Bar -->
		<view class="nav-bar-wrap">
			<my-mainPage-navbar title="Browse" icon="iconwode"></my-mainPage-navbar>
		</view>
		
		
		<!-- content -->
		<view class="content-wrap">
			<view class="box-item">
				<my-mainPage-navbar title="The Latest" icon="iconyoujiantou" :customText="customText" :customIcon="customIcon" :rightButton="false"></my-mainPage-navbar>
				<view class="img-item">
					<view class="img-card">
						<image class="img" src="../../static/images/cover_4.jpg" mode="scaleToFill"></image>
					</view>
					<view class="img-card">
						<image class="img" src="../../static/images/cover_5.jpg" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			
			<view class="box-item">
				<my-mainPage-navbar title="You Might Like" icon="iconyoujiantou" :customText="customText" :customIcon="customIcon" :rightButton="false"></my-mainPage-navbar>
				<view class="img-item">
					<view class="img-card">
						<image class="img" src="../../static/images/cover_6.jpg" mode="scaleToFill"></image>
					</view>
					<view class="img-card">
						<image class="img" src="../../static/images/cover_7.jpg" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			
			<view class="more-list">
				<my-mainPage-navbar title="more" icon="iconyoujiantou" :customText="customText" :customIcon="customIcon" :rightButton="false"></my-mainPage-navbar>
				<view class="my-list-box">
					<my-list :list="listdata" :textBoxStyle="textBoxStyle" :customMainText="customMainText"></my-list>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				customIcon:{
					'fontSize': '36rpx',
					'font-weight': 'bold',
					'width': '70rpx',
					'text-align': 'center'
				},
				
				customText:{
					'fontSize': '32rpx',
					'margin-left': '20rpx'
				},
				
				listdata: [
					{
						id: 1,
						mainText:'Music To Be Murdered By',
						
					},
					{
						id: 2,
						mainText:'Deep reason shallow',
						
					}
				],
				
				textBoxStyle:{
					'height': 'auto',
				},
				
				customMainText:{
					'fontSize': '22rpx',
					'font-weight': '600',
				}
			}
		},
		methods: {
			
		}
	}
	
</script>

<style lang="scss" scoped>
	.commend-wrap{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.content-wrap{
			flex: 1;
			padding-top: 50rpx;
			display: flex;
			flex-direction: column;
			.box-item{
				margin-bottom: 20rpx;
				.img-item{
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					.img-card{
						width: 280rpx;
						height: 176rpx;
						margin: 0rpx 20rpx;
						border-radius: 30rpx;
						background: #F1F3F6;
						// box-shadow:  3px 3px 5px #d4d6d8, -3px -3px 5px #ffffff;
						box-shadow:  5px 5px 10px #d4d6d8, 
						             -5px -5px 10px rgba(255, 255, 255, .8);
						.img{
							width: 100%;
							height: 100%;
							border-radius: 30rpx;
						}
					}
				}
			}
			
			.more-list{
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-top: 20rpx;
				.my-list-box{
					margin-top: 20rpx;
					flex: 1;
					overflow-y: auto;
				}
			}
			
		}
	}

</style>
